<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="search"/>
    <button @click="type = 1">默认</button>
    <button @click="type = 2">升序</button>
    <button @click="type = 3">降序</button>
    <ul>
        <li v-for="item in finallyPerson" :key="item.id">
            {{item.name}} -- {{item.age}}
        </li>
    </ul>
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data(){
      return{
        search:"",
          person:[
              {id:"001",name:"周董",age:"24"},
              {id:"002",name:"周杰",age:"21"},
              {id:"003",name:"李董",age:"25"},
              {id:"004",name:"赵董",age:"27"},
              {id:"005",name:"李杰",age:"29"},
              {id:"006",name:"周杰",age:"20"},
          ],
          type:1,
      }
    },
    computed:{
      finallyPerson(){
          const finallyPerson = this.person.filter(item=>{
              return item.name.includes(this.search)
          })
          // if(this.type === 1){
          //     return finallyPerson
          // }else  if(this.type === 2){
          //     return  finallyPerson.sort((a,b)=>{
          //         return a.age - b.age;
          //     })
          // }else if (this.type === 3) {
          //     return finallyPerson.sort((a,b)=>{
          //         return b.age - a.age;
          //     })
          // }
          switch (this.type){
              case 1:
                  return finallyPerson;
              case 2:
                  return finallyPerson.sort((a,b)=>{
                      return a.age - b.age;
                  });
              case 3:
                  return finallyPerson.sort((a,b)=>{
                      return b.age - a.age;
                  })
          }
      }
    }
  })
</script>
</body>
</html>